<template>
  <div class="success-wap">
    <a id="download-model" :href="download.url"></a>
    <div>
      <div class="success-image"><img :src="getRequireImg('success@2x')" alt="" /></div>
      <div class="success-text1">资料提交成功，恭喜您已通过预审！</div>
      <div class="success-amount">
        <div class="amount-label">您的预估额度为：</div>
        <div class="amount-text">60000</div>
      </div>
      <div class="success-text2">请保持电话畅通，稍后将会有工作人员<br>与您联系并核实信息</div>
      <div class="toProcess" @click="goDownload">下载APP查看审核进度<span>{{alert.text}}</span></div>
    </div>
    <wechat-mask v-if="WeChat_show"></wechat-mask>
  </div>
</template>
<script>
/*global $ returnCitySN require ClipboardJS wx err process*/
import { getImg } from "@/service/util.helper";
import WechatMask from "@/components/WechatMask";
import iosDownload from "@/mixins/iosDownload";

export default {
  components: {
    WechatMask,
  },
  data() {
    return {
      download: {
        url: "",
        show: false,
      },
      WeChat_show: false,
      alert: {
        text:'（3）',
        countTime: 3,
        count: 0,
      },
    }
  },
  mixins:[iosDownload],
  computed: {},
  methods: {
    getRequireImg(name, is64 = 0) {
      let imgObj = {
        name: name,
        is64: is64,
        download_page: 17,
        flooring_page: 167,
      };
      return getImg(imgObj);
    },
    goDownload() {
      console.log('下载成功')
      $("#download-model")[0].click();
      this.iosDownloadPage()
    },
  },
  created() {
    this.download.url = sessionStorage.getItem('download_url');
  },
  mounted() {
    if (this.$router.UA().weixin) {
      this.WeChat_show = true;
      return false;
    }

    this.alert.count = this.alert.countTime;
    let countdown = setInterval(() => {
      this.alert.count--;
      this.alert.text = `（${this.alert.count}）`;
      if (this.alert.count === 0) {
        this.alert.text = "";
        clearInterval(countdown);
        this.goDownload()
      }
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>

.success-wap{
  text-align: center;
  .success-image{
    width: 64px;
    height: 64px;
    border-radius: 50px;
    background-color: #3478F2;
    margin: 110px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 50%;
    }
  }

  .success-text1{
    font-weight: bold;
    font-size: 14px;
    color: #3478F2;
    line-height: 20px;
    margin-bottom: 11px;
  }
  .success-amount{
    border: 1px solid #3478F2;
    border-radius: 8px;
    margin: 0 12px 13px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    .amount-label{
      font-weight: bold;
      font-size: 20px;
      color: #333;
    }
    .amount-text{
      font-weight: bold;
      font-size: 40px;
      color: #FC1F1F;
      height: 56px;
      line-height: 56px;
    }
  }
  .success-text2{
    line-height: 20px;
    font-size: 14px;
    color: #333;
  }
  .toProcess{
    background-color: #3478F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 48px;
    width: 304px;
    height: 48px;
    border-radius: 8px;
    font-size: 20px;
    margin: 40px auto 0;
    span{
      font-size: 18px;
      font-weight: normal;
    }
  }
}
</style>
